<template>
	<view class="fun-scroll-content">
		<view class="fun-scroll">
			<scroll-view scroll-x="true" class="uni-swiper-tab" 
			:scroll-into-view='scrollIntoView'
			scroll-with-animation>
				<block v-for="(item,index) in contentViewList" :key='item.id'>
					<view :id="item.classifyKey" 
					class="swiper-tab-list scroll-view-item"  
					:class="tagIndex === index ? 'tag-active':''" 
					@click="changeTag(index,$event)">{{item.classifyName}}
						<view class="tab-bottom-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>
		<swiper  
		:duration="500" 
		class="swiper-box" 
		:current="current" 
		@change="changeCurrent" 
		:style="{'height':swiperHeight+'px'}">
			<block v-for="(item,index) in contentViewList" :key="item.id">
				<swiper-item :item-id="item.classifyKey">
					<scroll-view  scroll-y class=" list" :style="{'height':swiperHeight+'px'}"
					refresher-enabled
					:refresher-threshold="100"
					:refresher-triggered="triggered"
					@refresherrefresh="onRefresh"
					@scrolltolower="scrolltolower"
					:lower-threshold="100"	>
						<view>
							<GraphicList :graphicList="item.funSharePageResult"
							@likeFun="likeFun" :pageIndex="pageIndex" 
							@forwardFun="forwardFun"
							@clickInput="clickInput"
							@clickAttention="clickAttention"></GraphicList>
						</view>
						<view class="bottom-loading" v-if="contentViewList[index].funSharePageResult && contentViewList[index].funSharePageResult.data.length > 0">{{contentViewList[index].funSharePageResult.data.length >= 15 ? bottomLoading :'暂无更多数据'}}</view>
					</scroll-view>
				</swiper-item>
			</block>
		</swiper>
	</view> 
</template>

<script>
	import GraphicList  from "@/components/funScrollView/Graphic-list.vue";
	export default {
		data() {
			return {
				swiperHeight:500,
				tagIndex:0,
				current:0,
				scrollIntoView:'remen',
				classifyid:1,
				pageIndex:0,
				triggered: false,
				_freshing: false,
				bottomLoading:"上拉加载更多！",
				isLoading:false,
				isNoData:false
			};
		},
		
		props:{
			contentViewList:{
				type:Array,
				default:function(){
					return [];
				}
			}
		},
		components:{
			GraphicList
		},
		created() {
			uni.getSystemInfo({
				success:res=>{
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperHeight = height
				}
			})
		},
		methods:{
			// 当点击导航分类时触发事件
			changeTag(index,e){
				this.tagIndex = index;
				this.current = index;
				// this.$emit('changeTagId',e.target.dataset.funType)
			},
			// 当滑动页面时出发事件
			changeCurrent(e){
				this.isNoData = false
				this.bottomLoading = "上拉加载更多"
				this.tagIndex = e.detail.current;
				this.classifyid = e.detail.currentItemId
				this.$emit("changeCurrent",this.tagIndex)
				this.pageIndex = this.tagIndex
				if(this.tagIndex > 3){
					this.scrollIntoView = this.contentViewList[this.tagIndex].classifyKey
					return
				}
				this.scrollIntoView = this.contentViewList[0].classifyKey
			},
			likeFun(e){
				this.$emit("likeFun",e)
			},
			onRefresh() {
				if (this._freshing) return;  
				this._freshing = true;  
				if (!this.triggered)//界面下拉触发，triggered可能不是true，要设为true  
					this.triggered = true;
				this.bottomLoading = "上拉加载更多"
				this.isNoData = false
				this.$emit("onRefresh",this.tagIndex)
				
			},
			hideRefresh(){
				setTimeout(() => {
					this.triggered = false;//触发onRestore，并关闭刷新图标  
					this._freshing = false;
				}, 500)  
			},
			scrolltolower(){
				console.log(this.isNoData || this.isLoading)
				if (this.isLoading || this.isNoData) return;
				this.isLoading = true;  
				this.bottomLoading = "加载中..."
				uni.showLoading({
					title:"加载中"
				})
				this.$emit("scrolltolower",this.tagIndex)
				console.log("触底")
			},
			doenTolower(){
				this.isLoading = false;
			},
			tolowerNoData(){
				this.isLoading = false;
				this.isNoData = true
				this.bottomLoading = "我也是有底线的...."
			},
			forwardFun(id){
				this.$emit("forwardFun",id)
			},
			clickInput(e){
				this.$emit("clickInput",{...e})
			},
			clickAttention(uid){
				this.$emit('clickAttention',uid)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fun-scroll-content{
		.fun-scroll{
			width: 100vw;
			background-color: #FFF;
			.uni-swiper-tab{
				color: #969696;
				font-weight: bold;
				.scroll-view-item{
					line-height: 60rpx;
				}
				.tag-active{
					color: $fun-theme-color;
					.tab-bottom-line{
						margin: 0 auto;
						background-color: $fun-theme-color;
						width: 70rpx;
						height: 10rpx;
						border-radius: 10rpx;
					}
				}
			}
			.swiper-box{
				scroll-view{
					box-sizing: border-box;
				}
			}
		}
		.bottom-loading{
			margin: 15rpx;
			font-size: 26rpx;
			text-align: center;
			color: #999;
		}
	}
</style>
